/**
 * Creates the base structure of a date picker.
 * @member Ext.picker.Date
 */
@mixin extjs-datepicker {
  .#{$prefix}datepicker {
    border: $datepicker-border;

    background-color: $datepicker-background-color;
    position: relative;

    a {
      -moz-outline: 0 none;
      outline: 0 none;

      color: $datepicker-monthpicker-item-color;
      text-decoration: none;

      border-width: 0;
    }
  }

  .#{$prefix}datepicker-inner,
  .#{$prefix}datepicker-inner td,
  .#{$prefix}datepicker-inner th {
    border-collapse: separate;
  }

  .#{$prefix}datepicker-header {
    position: relative;

    height: 26px;

    @if $datepicker-header-background-gradient {
      @include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
    } @else {
      background-color: $datepicker-header-background-color;
    }
  }

  .#{$prefix}datepicker-prev,
  .#{$prefix}datepicker-next {
    position: absolute;
    top: 5px;

    width: 18px;

    a {
      display: block;

      width: 16px;
      height: 16px;

      background-position: top;
      background-repeat: no-repeat;

      cursor: pointer;

      text-decoration: none !important;

      @include opacity(.7);

      &:hover {
        @include opacity(1);
      }
    }
  }

  .#{$prefix}datepicker-next {
    right: 5px;

    a {
      background-image: theme-background-image($theme-name, $datepicker-next-image);
    }
  }

  .#{$prefix}datepicker-prev {
    left: 5px;

    a {
      background-image: theme-background-image($theme-name, $datepicker-prev-image);
    }
  }

  .#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
  .#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
    @include opacity(.6);
  }

  .#{$prefix}datepicker-month {
    padding-top: 3px;

    .#{$prefix}btn,
    button,
    .#{$prefix}btn-tc,
    .#{$prefix}btn-tl,
    .#{$prefix}btn-tr,
    .#{$prefix}btn-mc,
    .#{$prefix}btn-ml,
    .#{$prefix}btn-mr,
    .#{$prefix}btn-bc,
    .#{$prefix}btn-bl,
    .#{$prefix}btn-br {
      background: transparent !important;
      border-width: 0 !important;
    }

    span {
      color: #fff !important;
    }

    .#{$prefix}btn-split-right {
      background-image: theme-background-image($theme-name, $datepicker-month-arrow-image);
      padding-right: 12px;
    }
  }

  .#{$prefix}datepicker-next {
    text-align: right;
  }

  .#{$prefix}datepicker-month {
    //width: 120px;
    text-align: center;

    button {
      color: $datepicker-monthpicker-color !important;
    }
  }


  table.#{$prefix}datepicker-inner {
    width: 100%;
    table-layout: fixed;

    th {
      width: 25px;
      height: 19px;

      padding: 0;

      color: $datepicker-th-color;
      font: $datepicker-th-font;
      text-align: $datepicker-th-text-align;

      border-bottom: 1px solid $datepicker-th-border-bottom-color;
      border-collapse: separate;

      @if $datepicker-th-background-gradient {
        @include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
      } @else {
        background-color: $datepicker-th-background-color;
      }

      cursor: default;

      span {
        display: block;
        padding-right: 7px;
      }
    }

    tr {
      height: 20px;
    }

    td {
      border: $datepicker-border-width $datepicker-border-style;
      height: $datepicker-td-height;
      border-color: $datepicker-background-color;
      text-align: right;
      padding: 0;
    }

    a {
      padding-right: 4px;

      display: block;

      zoom: 1;

      font: normal ceil($font-size * .9) $font-family;
      color: $datepicker-item-color;
      text-decoration: none;
      text-align: right;
    }

    .#{$prefix}datepicker-active {
      cursor: pointer;
      color: black;
    }

    .#{$prefix}datepicker-selected {
      a {
        background: repeat-x left top;
        background-color: $datepicker-selected-item-background-color;
        border: 1px solid $datepicker-selected-item-border-color;
      }

      span {
        font-weight: bold;
      }
    }

    .#{$prefix}datepicker-today {
      a {
        border: $datepicker-border-width $datepicker-border-style;
        border-color: $datepicker-today-item-border-color;
      }
    }

    .#{$prefix}datepicker-prevday,
    .#{$prefix}datepicker-nextday {
      a {
        text-decoration: none !important;
        color: #aaa;
      }
    }

    a:hover,
    .#{$prefix}datepicker-disabled a:hover {
      text-decoration: none !important;

      color: #000;

      background-color: $datepicker-item-hover-background-color;
    }

    .#{$prefix}datepicker-disabled a {
      cursor: default;
      background-color: #eee;
      color: #bbb;
    }
  }

  .#{$prefix}datepicker-footer,
  .#{$prefix}monthpicker-buttons {
    position: relative;

    border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;

    @if $datepicker-footer-background-gradient {
      @include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
    } @else {
      background-color: $datepicker-footer-background-color;
    }

    text-align: center;

    .#{$prefix}btn {
      position: relative;
      margin: 4px;
    }
  }

  .#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
    background: none;
  }

  // month picker
  .#{$prefix}datepicker .#{$prefix}monthpicker {
    position: absolute;
    left: 0;
    top: 0;
  }


  .#{$prefix}monthpicker {
    border: $datepicker-border;
    background-color: $datepicker-background-color;
  }

  .#{$prefix}monthpicker-months,
  .#{$prefix}monthpicker-years {
    float: left;

    height: $datepicker-monthpicker-height;
    width: 88px;
  }

  .#{$prefix}monthpicker-item {
    float: left;

    margin: 4px 0 5px 0;

    font: normal ceil($font-size * .9) $font-family;
    text-align: center;
    vertical-align: middle;

    height: 18px;
    width: 43px;

    border: 0 none;

    a {
      display: block;

      margin: 0 5px;

      text-decoration: none;

      color: $datepicker-monthpicker-item-color;

      border: $datepicker-monthpicker-item-border;

      line-height: 17px;

      &:hover {
        background-color: $datepicker-monthpicker-item-hover-background-color;
      }

      &.#{$prefix}monthpicker-selected {
        background-color: $datepicker-monthpicker-item-selected-background-color;
        border: $datepicker-monthpicker-item-selected-border;
      }
    }
  }

  .#{$prefix}monthpicker-months {
    border-right: $datepicker-border;
    width: 87px;
  }

  .#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
    width: 44px;
  }

  .#{$prefix}monthpicker-yearnav {
    height: 28px;

    button {
      background-image: theme-background-image($theme-name, $datepicker-tool-sprite-image);
      height: 15px;
      width: 15px;
      padding: 0;
      margin: 6px 12px 5px 15px;
      border: 0;
      outline: 0 none;

      &::-moz-focus-inner {
        border: 0;
        padding: 0;
      }
    }
  }

  .#{$prefix}monthpicker-yearnav-next {
    background-position: 0 -120px;
  }

  .#{$prefix}monthpicker-yearnav-next-over {
    cursor: pointer;
    cursor: hand;
    background-position: -15px -120px;
  }

  .#{$prefix}monthpicker-yearnav-prev {
    background-position: 0 -105px;
  }

  .#{$prefix}monthpicker-yearnav-prev-over {
    cursor: pointer;
    cursor: hand;
    background-position: -15px -105px;
  }

  .#{$prefix}monthpicker-small {
    .#{$prefix}monthpicker-item {
      margin: 2px 0 2px 0;
    }

    .#{$prefix}monthpicker-yearnav {
      height: 23px;
    }

    .#{$prefix}monthpicker-months, .#{$prefix}monthpicker-years {
      height: 136px;
    }
  }

  @if $include-ie {
    .#{$prefix}quirks {
      .#{$prefix}ie7,
      .#{$prefix}ie8 {
        .#{$prefix}monthpicker-buttons {
          .#{$prefix}btn {
            margin-top: 2px;
          }
        }
      }

      .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
        margin-top: 3px;
        margin-bottom: 3px;
      }
    }

    .#{$prefix}ie6 .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
      margin-top: 3px;
      margin-bottom: 3px;
    }
  }

  //nlg support
  @if not $supports-gradients or $compile-all {
    .#{$prefix}nlg {
      @if $datepicker-header-background-gradient != null {
        .#{$prefix}datepicker-header {
          background-image: theme-background-image($theme-name, 'datepicker/datepicker-header-bg.gif');
          background-repeat: repeat-x;
          background-position: top left;
        }
      }

      @if $datepicker-footer-background-gradient != null {
        .#{$prefix}datepicker-footer,
        .#{$prefix}monthpicker-buttons {
          background-image: theme-background-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
          background-repeat: repeat-x;
          background-position: top left;
        }
      }
    }
  }
}